<!--
  Jeepay导航卡片， 支持4种风格
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/16 11:45
-->
<template>
  <!-- 宫格类型  -->
  <template v-if="props.type == 'grid'">
    <view class="grid-card-wrapper" :style="{ margin: calcPadding(), '--space-w': space + 'rpx' }">
      <block v-for="(v, i) in navListComputed" :key="i">
        <view
          class="card-main"
          :style="{ margin: calcMargin(), '--radius-size': radiusSize + 'rpx' }"
          hover-class="touch-hover"
          hover-stay-time="150"
          :class="{ 'card-big-main': navListComputed.length == 4 || navListComputed.length <= 2 }"
          @tap="clickFunc(v)"
        >
          <image :src="v.icon" mode="scaleToFill" />
          <view class="card-title">{{ v.title }}</view>
        </view>
      </block>
    </view>
  </template>

  <!-- 列表类型 -->
  <template v-if="props.type == 'list'">
    <view class="list-nav-wrapper" :style="{ '--radius-size': radiusSize + 'rpx' }">
      <block v-for="(v, i) in navListComputed" :key="i">
        <view class="nav-main" hover-class="touch-hover" hover-stay-time="150" @tap="clickFunc(v)">
          <image :src="v.icon" mode="scaleToFill" />
          <view class="nav-text">{{ v.title }}</view>
          <image class="nav-right" src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
        </view>
      </block>
    </view>
  </template>
</template>

<script setup>
import { reactive, ref, computed } from "vue"
import go from "@/commons/utils/go.js"
import ent from '@/commons/utils/ent.js'

// 定义组件参数
const props = defineProps({
  //显示类型： 支持  grid-宫格  list-列表
  type: { type: String, default: "list" },

  // 圆角矩形大小 为0 则 无圆角
  radiusSize: { type: Number, default: 32 },

  //间隙类型： 仅grid-宫格时生效， 支持 0 和 25
  space: { type: Number, default: 25 },

  // 导航列表，  格式：{ icon, title, pageUrl, clickFunc, entId }
  navList: { type: Array, default: () => [] },
})

// 点击事件
function clickFunc(nav) {
  // 包含回调事件
  if (nav.clickFunc) {
    return nav.clickFunc(nav)
  }

  // 包含URL
  if (nav.pageUrl) {
    return go.to(nav.pageUrl)
  }
}
const calcPadding = () => `${50 - props.space}rpx 35rpx 50rpx ${35 - props.space}rpx`
const calcMargin = () => `${props.space}rpx 0 0 ${props.space}rpx`


// 计算属性 
let navListComputed = computed(() => {
  return props.navList.filter(r => hasEnt(r.entId))
})

function hasEnt(entId){
	
	// 不包含： 说明无需隐藏
	if(!entId){
		return true
	}
	return ent.has(entId)
}

</script>

<style lang="scss" scoped>
.grid-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  background-color: $v-color-bgrey;
  padding-top: 25rpx;
  .card-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 25rpx 0 0 25rpx;
    width: calc(33.3% - var(--space-w));
    height: 210rpx;
    border-radius: var(--radius-size);
    background-color: $J-bg-ff;
    image {
      width: 72rpx;
      height: 72rpx;
    }
    .card-title {
      margin-top: 22rpx;
      color: $J-color-t80;
      font-size: $J-f-size30;
    }
  }
  .card-big-main {
    width: calc(50% - var(--space-w));
  }
}

.list-nav-wrapper {
  margin: 0 auto;
  width: 680rpx;
  border-radius: var(--radius-size);
  overflow: hidden;

  .nav-main {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    height: 120rpx;
    background-color: $J-bg-ff;
    image {
      width: 40rpx;
      height: 40rpx;
      vertical-align: text-bottom;
      margin: 0 20rpx 0 10rpx;
    }
    .nav-text {
      flex: 1;
      font-size: 32rpx;
    }
    .nav-right {
      margin: 0;
      width: 120rpx;
      height: 120rpx;
    }
  }
  .nav-setup {
    margin: 30rpx auto;
    width: 680rpx;
    border-radius: $J-b-r32;
    box-sizing: border-box;
  }
}
</style>
